<template>
	<view class="container">
		<view class="items" v-if="list.length>0">
			<view class="item" v-for="(item,index) in list" :key="index" @click="jump(item.id)">
				<image :src="item.store_logo" mode="aspectFill" class="left-img"></image>
				<view class="center">
					<view class="tit">{{ item.store_name }}</view>
					<view class="address">地址: {{ item.province + item.city + item.district }}</view>
				</view>
				<button size="mini" class="right-btn" @click.stop="daohang(item)">
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/pick-up/daohang.png"
						mode="widthFix"></image>
					<text>导航</text>
				</button>
			</view>
			<u-loadmore :status="hasMore?'loading':'nomore'" />
		</view>
		<view class="empty-container" v-else>
			<u-empty text="暂无相关数据"
				icon="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/empty.png"></u-empty>
		</view>
		<my-tabbar></my-tabbar>
	</view>
</template>

<script>
	import {
		getLocation
	} from "../../common/helper";

	export default {
		data() {
			return {
				list: [],
				pageIndex: 1,
				type: 1,
				hasMore: true,
				longitude: '',
				latitude: '',
			};
		},
		methods: {
			daohang(item) {
				let address = `${item.province}${item.city}${item.district}${item.store_address}`
				let latitude = parseFloat(item.latitude)
				let longitude = parseFloat(item.longitude)
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					scale: 8,
					name: item.store_name,
					address,
					success() {},
					fail(fail) {
						console.log(fail);
					}
				});
			},
			jump(id) {
				uni.navigateTo({
					url: `/pages/pick-up/pick-detail?id=${id}`
				})
			},
			async get_location() {
				const {
					longitude,
					latitude
				} = await getLocation()
				this.longitude = longitude
				this.latitude = latitude
				this.get_list()
			},
			async get_list() {
				const params = {
					longitude: this.longitude,
					latitude: this.latitude,
					pageIndex: this.pageIndex,
					pageSize: 20,
				}
				const data = await this.$post('api/ztd_list', params)
				if (data.code == 200) {
					this.list.push(...data.data.list)
					this.hasMore = data.data.list.length >= params.pageSize
				} else {
					this.hasMore = false
				}
			}
		},
		onLoad(e) {
			// #ifndef H5
			this.get_location()
			// #endif

			this.officialConfig(() => {
				this.get_location()
			})
		},
		onReachBottom() {
			if (this.hasMore) {
				this.pageIndex++
				this.get_list()
			}
		},
		onPullDownRefresh() {
			this.pageIndex = 1
			this.list = []
			this.get_location()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		onShow() {

		},
		components: {}
	}
</script>

<style lang="scss" scoped>
	.container {
		.items {
			.item {
				display: flex;
				background: #fff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				padding: 30rpx;

				.left-img {
					width: 150rpx;
					height: 160rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.center {
					flex: 1;
					@include flex-box(column, space-around);

					.tit {
						font-size: 28rpx;
						font-weight: 500;
					}

					.address {
						color: $color-919191;
					}
				}

				.right-btn {
					@include flex-center() align-self: center;
					border: 2rpx solid $color-080524;
					padding: 0 20rpx;
					height: 40rpx;
					border-radius: 30rpx;
					background: none;

					image {
						width: 34rpx;
					}
				}
			}
		}
	}
</style>